<template>
	<view class="popup-overlay" v-if="show">
		<view class="popup" @click.stop>
			<view class="popup-content">
				<view class="close-button" @click="close">×</view>

				<input class="popup-input" type="text" placeholder="输入会员手机号" v-model="mobile" />
				<picker mode="selector" :range="couponNames.map(c => c.name)" @change="onCouponChange">
					<view class="picker-custom">
						<view class="picker-selected">{{ selectedCouponName || '优惠券名称' }}</view>
						<view class="picker-arrow"></view>
					</view>
				</picker>
				<input class="popup-input" type="number" placeholder="输入赠送数量" v-model="num" />
			</view>
			<button class="popup-button" @click="confirmGrant">确认赠送</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: Boolean,
			couponNames: Array
		},
		data() {
			return {
				mobile: '',
				selectedCouponId: null, // 选中的优惠券ID
				selectedCouponName: '', // 选中的优惠券名称
				num: 1 // 默认赠送数量
			};
		},
		methods: {
			close() {
				console.log('关闭弹窗');
				// 这里可以触发父组件事件，关闭弹窗
				this.$emit('close');
			},
			closePopup() {
				this.$emit('update:show', false);
			},
			onCouponChange(e) {
				const index = e.detail.value; // 获取选择的索引
				this.selectedCouponId = this.couponNames[index].id; // 获取对应的id
				this.selectedCouponName = this.couponNames[index].name; // 获取对应的name
			},
			confirmGrant() {
				if (!this.mobile || !this.selectedCouponId || !this.num) {
					uni.showToast({
						title: '请完整填写信息',
						icon: 'none'
					});
					return;
				}

				// 回传数据，包括优惠券ID和名称
				// this.$emit('grant', {
				// 	mobile: this.mobile,
				// 	num: this.num,
				// 	couponId: this.selectedCouponId,
				// 	couponName: this.selectedCouponName
				// });


				this.addData();
				this.closePopup();
			},
			addData() {

				this.$xyfun.storeId().then((store_id) => {


					this.$api.post({
						url: '/Coupon/sendCoupon',
						loadingTip: '加载中...',
						data: {
							store_id: store_id,
							mobile: this.mobile,
							num: this.num,
							coupon_id: this.selectedCouponId,
							couponName: this.selectedCouponName
						},
						success: res => {
							uni.stopPullDownRefresh();
							this.isLoading = false;
							console.log(res)
							// this.cards = res.data;
						}
					});
				})

			},
		}
	};
</script>

<style scoped>
	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close-button {
		position: absolute;
		top: 10px;
		right: 30px;
		width: 24px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		background-color: #000;
		color: #fff;
		border-radius: 50%;
		font-size: 18px;
		cursor: pointer;
	}

	.close-button:hover {
		background-color: #d32f2f;
	}

	.popup {
		background-color: #fff;
		width: 80%;
		border-radius: 10px;
		padding: 20px;
	}

	.popup-content {
		display: flex;
		flex-direction: column;
	}

	.popup-input {
		margin: 20px 0;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		background: #F5F5F5;
	}

	.popup-button {
		margin-top: 20px;
		background-color: #65C61D;
		color: #fff;
		border: none;
		border-radius: 14rpx;
		font-size: 16px;
	}

	.arrow-down {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #000;
		margin-left: 10px;
	}

	.picker-container {
		background-color: #fff;
		/* 背景颜色 */
		padding: 10px;
		/* 内边距 */
	}

	.picker-custom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		border: 1px solid #ccc;
		/* 边框 */
		border-radius: 5px;
		/* 圆角 */
		background-color: #F5F5F5;
		/* 背景颜色 */
	}

	.picker-selected {
		flex: 1;
		color: #333;
		/* 文字色 */
	}

	.picker-arrow {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #000;
		margin-left: 10px;
	}
</style>